<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>WORKING test</title>


<!--
<script src="http://www.google.com/jsapi?key=ABQIAAAANU8OAqbJPAHXV4SpKuTEvhQx6TWrfC8bNfnC-vtzzHJYkwhD6xSt50-Z_44EojojRLDiBj3kn932Rw" type="text/javascript"></script>
-->

<!--
TODO:
    0) Why can't I see older stuff
	1) Get working with jsapi key??
	2) Limit query to today-8 (today and last week)
	3) Automated accordion display
	4) Include QOTD
	5) Each panel should have its own timer
    6) Separate positioning CSS from styling CSS
    7) after #6, produce several themes

  Panel Types:
    wotd
    last three days
    qotd
    announce
-->
<style type="text/css">
html, body  {height: 95%; font-family: "Trebuchet MS",sans-serif; background-color: #000000; color: #bbbbbd; text-align:center;}
.largeItem  { font-size:204px; }
.mediumItem { font-size:96px; } 
.smallItem  { font-size:36px; }
#container { position: relative; min-height: 100%; }
.footer { position: absolute; bottom: 25px; left: 0%; right: 0%; font-size:36px; }
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="date-en-US.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("gdata", "2.x", {packages: ["calendar"]});

var wotdPanels = [ ];
var wotdCurrentPanel = 0;

var callback = function (result) {
    var entries = result.feed.getEntries();
    for (var i = 0; i < entries.length; i++) {
        var eventEntry = entries[i];
        var eventTitle = eventEntry.getTitle().getText();
        var startDateTime = null;
        var eventDate = null;
        var eventContent = eventEntry.getContent().getText();
     
        var times = eventEntry.getTimes();
        if (times.length > 0) {
            startDateTime = times[0].getStartTime();
            eventDate = startDateTime.getDate();
        }
     
        var hDate = Date.parse(eventDate);
        var eventDisplayDate = hDate.toString("dddd, MMMM dS");

/*
        var locations = eventEntry.getLocations();
        var locationStr = toLowerCase(locations[0].getValueString());
        if (! locationStr) {
            continue;
        }
        var panelType = "";
        if (locationStr === "wotd") {
            panelType = "Word of the Day";
        } else if (locationStr === "qotd"
*/

        wotdPanels.push('<div class="display"><div class="largeItem">' + eventTitle + '</div><div class="footer">Word of the Day:<br/>' + eventDisplayDate + '</div></div>');
    }
    $(function () {
        $('div.display').replaceWith(wotdPanels[wotdCurrentPanel]);
        setInterval(update, 5000);
        function update() {
            $('div.display').fadeOut(1000,function(){
                wotdCurrentPanel++;
                if(wotdCurrentPanel >= wotdPanels.length) {
                    wotdCurrentPanel = 0;
                    // Replace this with another AJAX call
                    // location.reload(); // Reload from server/file each cycle 
                }
                $('div.display').replaceWith(wotdPanels[wotdCurrentPanel]);
            })
        }

    });
};
    
// Error handler to be invoked when getEventsFeed() produces an error
var handleError = function (error) {
    $('div.display').replaceWith('<pre>' + error + '</pre>');
};

function _run() {
    var feedUrl = "https://www.google.com/calendar/feeds/u6g675oejpdha4pncv50rmi8tc%40group.calendar.google.com/public/full";
    var maxResults = 20;
    var calendarService = new google.gdata.calendar.CalendarService('LiquidChicken-wotdDisplayer-1.0');
    var query = new google.gdata.calendar.CalendarEventQuery(feedUrl);
    query.setOrderBy('starttime');
    query.setSortOrder('ascending');
    query.setFutureEvents(true);
    query.setSingleEvents(true);
    query.setMaxResults(maxResults);

    // Submit the request using the calendar service object
    calendarService.getEventsFeed(query, callback, handleError);
}

google.setOnLoadCallback(_run);



</script>

</head>
<body>
<div id="container">
  <div class="display">
      <div class="largeItem"/>
      <div class="footer"/>
  </div>
</div>

</body>
</html>


